<template>
    <div class="h-home">
        <!--首页-->
        <template v-if="routeName=='/'||routeName=='home'">
            <header class="home-header">
                <div class="center-info">
                    <div class="bg-title">
                        <h1>深圳市星际教育科技</h1>
                        <span class="bg-mask"></span>
                    </div>
                    <p class="bg-subtitle">为您提供专业全面的升学一站式服务助力孩子升学</p>
                </div>
            </header>

            <section class="home-section">
                <div class="section-wrap">
                    <h1 class="title">主要业务</h1>
                    <div class="work-content">
                        <div class="work-items" v-for="(item,index) in workList" :key="index">
                            <p class="work-items-title">{{item.title}}</p>
                            <ul class="work-items-wrap">
                                <li class="work-left">
                                    <div class="work-cover">
                                        <img src="../../public/images/work_1-cover.png" alt="">
                                        <span class="work-cover-text" v-html="item.transTitle"></span>
                                    </div>
                                </li>
                                <li class="work-item" v-for="(context,i) in item.list" :key="i">
                                    <img class="work-item-cover" src="../../public/images/work_1-cover.png" alt="">
                                    <div class="work-info">
                                        <h3 class="info-title row1">{{context.title}}</h3>
                                        <p class="subtitle row2">{{context.subtitle}}</p>
                                        <p class="price">¥{{context.price}}</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <h1 class="title">升学讲座</h1>
                    <div class="lecture-content">
                        <div class="lecture-items">
                            <h3 class="lecture-items-title">直播专题名称</h3>
                            <div class="lecture-wrap">
                                <div class="carousel-wrapper">
                                    <span class="carousel-mask_1"></span>
                                    <span class="carousel-mask_2"></span>
                                    <el-carousel height="218px" :interval="3000">
                                        <el-carousel-item v-for="item in 2" :key="item">
                                            <h3 class="small">{{ item }}</h3>
                                        </el-carousel-item>
                                    </el-carousel>
                                </div>
                                <ul class="left-items">
                                    <li class="left-item" v-for="item in 4">
                                        <h5 class="course-title row2">课程课程课程课程课程课程课程</h5>
                                        <p class="course-subtitle row2">课程课程课程课程课程课程课程课程课程课程</p>
                                        <div class="course-info">
                                            <span class="course-price">¥300.90</span>
                                            <span class="sign-up">123报名</span>
                                        </div>
                                    </li>
                                </ul>
                                <div class="ad-items">
                                    <img class="ad-cover" src="../../public/images/home-bg.png" alt="">
                                    <img class="ad-cover" src="../../public/images/home-bg.png" alt="">
                                </div>
                                <mt-swipe :auto="4000" class="ad-items-swipe">
                                    <mt-swipe-item>
                                        <img class="ad-cover" src="../../public/images/home-bg.png" alt="">
                                    </mt-swipe-item>
                                    <mt-swipe-item>
                                        <img class="ad-cover" src="../../public/images/home-bg.png" alt="">
                                    </mt-swipe-item>
                                </mt-swipe>
                                <div class="right-column">
                                    <h5 class="hot-name">热门课程</h5>
                                    <ul class="right-items">
                                        <li class="right-item" v-for="item in 10"
                                            v-if="isPhone&&!isOpen?item<=4:item">
                                            <template v-if="!isPhone">
                                                <i class="hot-icon" v-if="item<3"></i>
                                                <i class="hot-num" v-else>{{item}}</i>
                                            </template>
                                            <p class="hot-text row1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
                                        </li>
                                        <p class="more-text" v-if="isPhone" @click="isOpen=!isOpen">
                                            {{isOpen?'收起':'查看全部'}}</p>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </template>
        <!--其他子路由页面-->
        <router-view></router-view>

    </div>
</template>

<script>
    import {Swipe, SwipeItem} from 'mint-ui';
    import Vue from 'vue';

    Vue.component(Swipe.name, Swipe);
    Vue.component(SwipeItem.name, SwipeItem);
    import {mapState, mapGetters} from 'vuex'

    export default {
        name: "Home",
        data() {
            return {
                scrollTop: 0,
                isFixed: false,
                tabs: [
                    {name: '首页', id: 1},
                    {name: '升学直通车', id: 2},
                    {name: '名师工作室', id: 3},
                    {name: '社区', id: 4},
                    {name: '招生合作', id: 5},
                    {name: '知识库', id: 6},
                ],
                isOpen: false,
                workList: [
                    {
                        title: `材料办理择校指导`, cover: 'work_3-cover.png', transTitle: `材料办理<br>择校指导`, list: [
                            {
                                title: '计算入学积分及积分提升',
                                subtitle: '针对不清楚申请材料、材料不全、没有时间办理的家长提供材料指导与办理', id: 1, price: '1500'
                            },
                            {
                                title: '计算入学积分及积分提升',
                                subtitle: '针对不清楚申请材料、材料不全、没有时间办理的家长提供材料指导与办理', id: 2, price: '1500'
                            },
                            {
                                title: '计算入学积分及积分提升',
                                subtitle: '针对不清楚申请材料、材料不全、没有时间办理的家长提供材料指导与办理', id: 3, price: '1500'
                            },
                        ], id: 1
                    },
                    {
                        title: `学位申请填报进度跟踪`, cover: 'work_2-cover.png', transTitle: `学位申请填报<br>进度跟踪`,
                        list: [
                            {
                                title: '计算入学积分及积分提升',
                                subtitle: '针对不清楚申请材料、材料不全、没有时间办理的家长提供材料指导与办理', id: 1, price: '1500'
                            },
                            {
                                title: '计算入学积分及积分提升',
                                subtitle: '针对不清楚申请材料、材料不全、没有时间办理的家长提供材料指导与办理', id: 2, price: '1500'
                            },
                            {
                                title: '计算入学积分及积分提升',
                                subtitle: '针对不清楚申请材料、材料不全、没有时间办理的家长提供材料指导与办理', id: 3, price: '1500'
                            },
                        ], id: 2
                    },
                    {
                        title: `插班转学`, cover: 'work_1-cover.png', transTitle: `插班转学`, list: [
                            {
                                title: '计算入学积分及积分提升',
                                subtitle: '针对不清楚申请材料、材料不全、没有时间办理的家长提供材料指导与办理', id: 1, price: '1500'
                            },
                            {
                                title: '计算入学积分及积分提升',
                                subtitle: '针对不清楚申请材料、材料不全、没有时间办理的家长提供材料指导与办理', id: 2, price: '1500'
                            },
                            {
                                title: '计算入学积分及积分提升',
                                subtitle: '针对不清楚申请材料、材料不全、没有时间办理的家长提供材料指导与办理', id: 3, price: '1500'
                            },
                        ], id: 3
                    },
                ]
            };
        },
        computed: {
            ...mapState(['isPhone']),
            ...mapGetters(['routeName'])
        },
    };
</script>

<style scoped lang="scss">

    .home-header {
        position: relative;
        width: 100%;
        height: 464px;
        background: url("../../public/images/home-bg.png") no-repeat;
        background-size: cover;
        .center-info {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            color: #fff;
            text-align: center;
            .bg-title {
                position: relative;
                width: 500px;
                height: 100px;
                line-height: 100px;
                margin: 0 auto 32px;
                z-index: 111;
                h1 {
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    z-index: 2;
                    font-size: 40px;
                    font-weight: bold;
                }
                .bg-mask {
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    background: #2062D6;
                    opacity: .4;
                    z-index: 1
                }
            }
            .bg-subtitle {
                font-size: 20px;
            }
        }
        .tabs {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 55px;
            background: transparent;
            color: #fff;

        }
    }

    .home-section {
        background: #EBEEF5;
        .section-wrap {
            width: 1200px;
            max-width: 1200px;
            margin: 0 auto;
            .title {
                margin: 40px 0;
                color: #6c6c6c;
                font-size: 36px;
                font-weight: bold;
                text-align: center;
            }
            .work-content {
                padding: 24px 37px;
                background: #fff;
                border-radius: 28px;
                .work-items {
                    position: relative;
                    display: flex;
                    justify-content: space-between;
                    height: 337px;
                    padding-top: 37px;
                    .work-items-title {
                        position: absolute;
                        top: 0;
                        left: 0;
                        font-size: 20px;
                    }
                    .work-items-wrap {
                        display: flex;
                        width: 100%;
                        overflow-x: auto;
                    }
                    .work-left {
                        height: 100%;
                        margin-right: 10px;
                    }

                    .work-cover {
                        position: relative;
                        width: 201px;
                        height: 252px;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                        .work-cover-text {
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            transform: translate(-50%, -50%);
                            width: 100%;
                            text-align: center;
                            font-size: 22px;
                            font-weight: bold;
                            color: #fff;
                        }
                    }
                    .work-item {
                        width: 285px;
                        margin-right: 10px;
                        .work-item-cover {
                            width: 100%;
                            height: 157px;
                            min-width: 220px;
                            margin-bottom: 10px;
                        }
                        .info-title {
                            font-size: 16px;
                            color: #07111B;
                        }
                        .subtitle {
                            color: #999;
                            font-size: 14px;
                        }
                        .price {
                            color: #1E80FF;
                            font-size: 15px;
                        }
                    }
                }
            }
        }

    }

    .lecture-content {
        padding: 24px 37px;
        background: #fff;
        border-radius: 28px;
        .lecture-items-title {
            font-size: 20px;
        }
        .lecture-wrap {
            display: flex;
            height: 314px;
            padding-top: 18px;
            box-sizing: content-box;
            .carousel-wrapper {
                position: relative;
                width: 224px;
                height: 100%;
                padding-top: 32px;
                border-radius: 10px;
                background: #40B0FF;
                .carousel-mask_1 {
                    position: absolute;
                    top: 48px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 192px;
                    height: 187px;
                    opacity: .19;
                    border-radius: 7px;
                    background: #fff;
                    z-index: 1
                }
                .carousel-mask_2 {
                    position: absolute;
                    top: 40px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 172px;
                    height: 203px;
                    opacity: .45;
                    border-radius: 7px;
                    background: #fff;
                    z-index: 2
                }
            }
            .left-items {
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                max-width: 467px;
                height: 100%;
                .left-item {
                    display: flex;
                    flex-direction: column;
                    width: 50%;
                    height: 50%;
                    padding: 30px 25px 25px;
                    font-size: 12px;
                    color: #999;

                    .course-title {
                        color: #646464;
                        font-size: 14px;
                    }
                    .course-subtitle {
                        margin-top: 4px;
                    }
                    .course-info {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .course-price {
                            color: #1E80FF;
                            font-size: 14px;
                        }

                    }
                }
            }
            .ad-items {
                display: flex;
                flex-direction: column;
                .ad-cover {
                    width: 230px;
                    height: 156px;
                    margin-bottom: 2px;
                }
            }
            .ad-items-swipe {
                display: none;
            }
            .right-column {
                flex: 1;
                .hot-name {
                    margin: -5px 0 5px 26px;
                    font-style: oblique;
                    font-weight: bold;
                    font-size: 16px;
                    color: #40B0FF;
                    text-align: center;
                }
                .right-item {
                    display: flex;
                    margin: 0 0 10px 26px;
                    .hot-icon {
                        display: inline-flex;
                        width: 13px;
                        height: 13px;
                        background: url("../../public/images/hot-ico.png");
                        background-size: 100% 100%;
                    }
                    .hot-num {
                        width: 13px;
                        font-weight: bold;
                        font-style: oblique;
                        color: #FF9548;
                    }
                    .hot-text {
                        display: inline-flex;
                        margin-left: 12px;
                        color: #646464;
                        font-size: 14px;
                    }
                }
            }
        }
    }

    .el-carousel {
        position: initial;
        width: 153px;
        margin: auto;
        border-radius: 10px;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    /**
    媒体查询
     */
    @media screen and (min-width: 1650px) {
        .home-header {
            height: 525px !important;
        }
    }

    @media screen and (min-width: 960px) and (max-width: 1200px) {
        .tab-wrap {
            width: 900px !important;
        }
        .home-section {
            .work-content {
                padding: 24px 15px !important;
                margin: 0 20px;
            }
        }

    }

    @media screen and (min-width: 750px) and (max-width: 960px) {
        .tab-wrap {
            width: 375px !important;
        }
    }

    @media screen and (max-width: 750px) {
        .home-header {
            height: 375px !important;
            .center-info {
                .bg-title {
                    width: 100% !important;
                    h1 {
                        font-size: 32px !important;
                    }
                }
                .bg-subtitle {
                    font-size: 22px !important;
                }
            }
        }
        .section-wrap {
            width: auto !important;
            .title {
                text-align: left !important;
                padding-left: 15px;
            }
        }
        .home-section {
            .work-left {
                display: none;
            }
            .work-content {
                padding-left: 0 !important;
                padding-right: 0 !important;
                .work-items-title {
                    left: 15px !important;
                }
                .work-items-wrap {
                    padding-left: 15px;
                    .work-item {
                        .info-title {
                            font-size: 18px !important;
                        }
                        .subtitle {
                            font-size: 16px !important;
                        }
                        .price {
                            font-size: 16px !important;
                        }
                    }
                    .work-item:last-child {
                        padding-right: 15px !important;
                    }
                }

            }
        }
        .lecture-content {
            padding: 15px 20px !important;
            .lecture-wrap {
                height: auto !important;
                flex-direction: column;
            }
            .carousel-wrapper,
            .left-items {
                display: none !important;
            }
            .ad-items {
                display: none !important;
            }
            .ad-items-swipe {
                display: block !important;
                height: 250px;
                border-radius: 10px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .hot-name {
                display: none;
            }
            .right-items {
                padding-top: 10px;
                .right-item {
                    margin-left: 0 !important;
                }
            }
            .hot-text {
                font-size: 20px !important;
            }
            .more-text {
                text-align: center;
                color: #999;
                font-size: 18px;
            }
        }
    }
</style>
